<!-- 评论 -->
<template>
  <div class="comment">
    <div class="header">
      <div class="time">
        <span>时间选择:</span>
        <div class="tab">
          <!-- <el-radio-group
            v-model="tabPosition"
            style="margin-bottom: 30px;"
            @tab-click="handleTab"
          >
            <el-radio-button
              name="1"
              label="全部"
            />
            <el-radio-button label="今天">
              今天
            </el-radio-button>
            <el-radio-button
              name="2"
              label="昨天"
            >
              昨天
            </el-radio-button>
            <el-radio-button
              name="2"
              label="最近7天"
            >
              最近7天
            </el-radio-button>
            <el-radio-button
              name="2"
              label="最近30天"
            >
              最近30天
            </el-radio-button>
            <el-radio-button
              name="2"
              label=" 本月"
            >
              本月
            </el-radio-button>
          </el-radio-group> -->
          <el-tabs
            type="border-card"
            @tab-click="handleTab"
          >
            <el-tab-pane label="全部" />
            <el-tab-pane label="今天" />
            <el-tab-pane label="昨天" />
            <el-tab-pane label="最近7天" />
            <el-tab-pane label="最近30天" />
            <el-tab-pane label="本月" />
            <el-tab-pane label="本年" />
          </el-tabs>
        </div>
        <div>
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
          />
        </div>
      </div>
      <div class="state">
        <div>
          <span>评论状态</span>
          <el-select
            v-model="value"
            placeholder="请选择评论状态"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div>
          <span>商品搜索：</span>
          <input
            v-model="search"
            placeholder="请输入商品名称"
          >
          <el-button
            icon="el-icon-search"
            circle
            @click="searchItem"
          />
        </div>
        <div>
          <span>用户名称: </span>
          <input
            v-model="search1"
            placeholder="请输入用户名称"
          >
          <el-button
            icon="el-icon-search"
            circle
            @click="searchUser"
          />
        </div>
      </div>
      <div>
        <el-button
          type="primary"
          @click="addComment"
        >
          添加虚拟评论
        </el-button>
      </div>
    </div>
    <div class="main">
      <el-table
        :data="tableData"
        border
        style="width: 90%"
      >
        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="150"
        />
    
        <el-table-column
          label="商品信息"
          width="120"
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.img"
              alt=""
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="用户名称"
          width="120"
        />
        <el-table-column
          prop="num"
          label="商品评分"
          width="120"
        />
        <el-table-column
          prop="num1"
          label="服务评分"
          width="120"
        />
        <el-table-column
          prop="title"
          label="评价内容"
          width="120"
        />
        <el-table-column
          prop="title"
          label="回复内容"
          width="120"
        />
        <el-table-column
          prop="time"
          label="评价时间"
          width="120"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >
              回复
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="delItem(scope.row,scope.$index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
   
    <el-dialog :visible.sync="dialogVisible">
      <!-- <img
        width="100%"
        :src="dialogImageUrl"
        alt=""
      > -->
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-width="80px"
      >
        <el-form-item label="商品">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
          >
            <i
              slot="default"
              class="el-icon-plus"
            />
            <div
              slot="file"
              slot-scope="{file}"
            >
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete" />
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="用户名称"
          prop="name"
        >
          <el-input v-model="form.name" />
        </el-form-item>
 
        <el-form-item
          label="评价文字"
          prop="title"
        >
          <el-input
            v-model="form.title"
            type="textarea"
          />
        </el-form-item>
        <el-form-item
          label="评价文字"
        >
          <el-rate
            show-text
          />
        </el-form-item>
        <el-form-item
          label="服务分数"
        >
          <el-rate
            show-text
          />
        </el-form-item>
       
        <el-button
          type="primary"
          @click="setaddComment"
        >
          提交
        </el-button>
        <el-button type="primary">
          重置
        </el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import axios from 'axios'
import {apiGetComment} from '@/api/comment.js'
export default {
//import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
    //这里存放数据
    return {
      tabPosition2:'全部',
            value1: null,
            options: [{
              value: '已回复',
              label: '已回复'
            }, {
              value: '未回复',
              label: '未回复'
            }],
            value: '',
            tableData: [],
            dialogVisible: false,
              dialogImageUrl: '',
              textarea: '',
              form: {
              name: '',
              title:'',
              num:'',
              num1:'',
            
            },
            rules:{
              name: [
                { required: true, message: '请输入活动名称', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
              ],
              title: [
                { required: true, message: '请选择活动区域', trigger: 'change' }
              ],
              // num: [
              //   {  required: true, message: '请选择日期', trigger: 'change' }
              // ],
              // num1: [
              //   {  required: true, message: '请选择时间', trigger: 'change' }
              // ],
              
            
            },
            // tabPosition: '1',
            search:'',
            search1:'',
            activeName: "first",
    };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {
     
    },
    //生命周期 - 创建完成（可以访问当前this实例）
   
     created(){
      // const res=await apiGetComment()
      // console.log(res,'ssss')
      // this.tableData=res.data
      this.getCommit()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    //方法集合
    methods: {
        async getCommit(){
            const res=await apiGetComment()
              console.log(res,'ssss')
              this.tableData=res.data
        },
          handleTab(tab, event){
          console.log(tab, event,'tab, event')
          this.getCommit()
        },
         handleClick(row) {
            console.log(row);
          },
          addComment(){
            this.dialogVisible=true;
          },
          handleRemove(file, fileList) {
            console.log(file, fileList);
          },
          handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
          },
          setaddComment(){
            this.tableData.push(this.form)
            console.log(this.tableData,'ttt')
            this.dialogVisible=false;
          },
          delItem(row,index){
            this.tableData.splice(index,1)
          },
          searchItem(){
          this.tableData= this.tableData.filter(item=>{
            console.log(item)
              if(item.name.indexOf(this.search)!==-1){
                return item
              }
            
            })
          },
          searchUser(){
            this.tableData= this.tableData.filter(item=>{
            console.log(item)
              if(item.title.indexOf(this.search1)!==-1){
                return item
              }
            
            })
          }
}
}
</script>
<style lang='css' scoped>
.comment{
   width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
}
.header{
   width: 100%;
   
}
.el-upload--picture-card{
  width: 6.25rem;
  height: 6.25rem;
}
.time{
   width: 100%;
   height: 3.125rem;
   line-height: 3.125rem;
   display: flex;
   justify-content: space-around;
   margin-top: .625rem;
}
.time span{
   display: flex;
   font-weight: bold;
}
.tab{
   flex: 1;
   display: flex;
   height: 2.1875rem;
   line-height: 2.1875rem;
   justify-content: space-around;
}
.state{
   display: flex;
}
.state div{
   margin-left: .625rem;
}
.main{
  flex: 1;
  overflow-y: auto;
}
img{
  width: 6.25rem;
  height: 6.25rem;
}
</style>